<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆界面</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html
			{
				height: 100%;
			}
			body{
				height: 100%;
			}
			#box
			{
				height:100%;
				background-image:linear-gradient(to right,#fbc2eb,#a6c1ee);/*渐变属性，自左向右*/
			}
			.login-wrapper
			{
				width: 280px;
				height: 350px;
				border-radius: 15px;
				background-color: #fff;
				margin: 50px auto;/*  外边距 1.距离顶部  2.距离左右  auto自动居中*/
			}
			.header
			{
				font-size: 20px;/*字体大小*/
				font-weight: bold;/*字体加粗*/
				text-align: center;/*文本居中*/
				line-height: 100px;/*设置行间距，距离顶部和底部*/
			}
			.ipt-box
			{
				width: 100%;
				overflow: hidden;/*超出部分隐藏*/
			}
			.input-item
			{
				width: 80%;
				margin-bottom: 20px;/*距离底部20px*/
				border: none;/*设置边框样式*/
				outline:none;/*设置内部阴影区域*/
				padding: 10px 0;/*内边距距离边框*/
				border-bottom: 1px solid #000000;/*设置底部边框*/
				font-size: 14px;
				margin-left: 10%;/*距离输入框左侧*/
			}
			.btn
			{
				text-align: center;
				padding: 10px 0;
				width: 80%;
				margin-left: 10%;
				background-image: linear-gradient(to right,#fbcaaa,#a6ceee);
				color: white;
			}
			.msg
			{
				text-align: center;
				line-height: 88px;
				font-size: 14px;
				color: cyan;
			}
			.msg a
			{
				text-decoration: none;
				color: #a6c1ee;
			}
		</style>
	</head>
	<body>
		<div id="box">
			&nbsp;<!--空格符-->
			<div class="login-wrapper">
				<div class="header">
					登陆界面
				</div>
				<div class="ipt-box">
						<input type="text" placeholder="账号" class="input-item">
						<input type="password" placeholder="密码" class="input-item">	
				</div>
				<div class="msg">
					忘记密码？<a href="../untitled.html">点击</a>
				</div>
			</div>
		</div>
	</body>
</html>